<template>
    <el-card class="box-card" v-loading.fullscreen.lock="fullscreenLoading">
        <el-row>
            <el-col :span="12">
                <el-form ref="ruleFormRef" :model="form">
                    <el-form-item prop="shareUrl" label="分享链接" :rules="[
                        { required: true, message: '链接不能为空' },
                    ]">
                        <el-input v-model="form.shareUrl" placeholder="输入抖音视频链接" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click=change(ruleFormRef)>提取解析</el-button>
                    </el-form-item>
                </el-form>


            </el-col>
            <el-col :span="24" v-if = "options.src">
                <el-text class="mx-1" type="info">{{ options.author }}</el-text><br>
                <el-text class="mx-1" type="success">{{ options.title }}</el-text>
                <videoPlay v-bind="options"></videoPlay>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup >
import { ref, reactive } from 'vue';
import { ElMessage ,ElLoading } from 'element-plus';
import axios from 'axios';
import 'vue3-video-play/dist/style.css';
import { videoPlay } from 'vue3-video-play';
const fullscreenLoading = ref(false);
const ruleFormRef = ref();
const options = reactive({
    title: "",
    src: "", //视频源
    type: 'video/mp4',
    poster: '',
    webFullScreen: false,
    speed: true,
    currentTime: 0,
    author:'',
    volume:1
});
const form = reactive({
    shareUrl: '',
})
const change = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            fullscreenLoading.value = true
            let url = form.shareUrl;
            if (url.indexOf('v.douyin.com') != -1) {
                let tms = "http" + url.split("http")[1];
                let t = tms.split("\/")[3];
                form.shareUrl = 'https://v.douyin.com/' + t;
                Send();
            } else {
                ElMessage.error('请输入抖音视频分享链接.');
                form.shareUrl = null;
            }
        } else {
            // console.log(fields)
            ElMessage.error('输入框不能为空.')
        }
    })
    

}
const Send = () => {
    let url = `http://www.tch1217.top/test.php?url=${form.shareUrl}`
    axios.get(url).then((res) => {
        if(res.data.code == 200){
            options.title = res.data.data.title;
            options.src = res.data.data.url;
            options.author = res.data.data.author;
        }
        fullscreenLoading.value = false;
    }).catch(() => {
        fullscreenLoading.value = false;
        ElMessage.error('请求失败.');
    })
}
</script>
<style scoped lang="scss"></style>